<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js canvas - geometry - hierarchy</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background: #fff;
            padding: 0;
            margin: 0;
            font-weight: bold;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script src="../build/three.js"></script>
<script src="js/renderers/Projector.js"></script>
<!--<script src="js/renderers/CanvasRenderer.js"></script>-->

<script src="js/libs/stats.min.js"></script>
<script>

    var scene, camera, renderer;

    var container, stats;

    var width = window.innerWidth, height = window.innerHeight;

    var mouseX = 0, mouseY = 0;

    init();
    animate();

    function init() {
        container = document.getElementById('container');

        camera = new THREE.PerspectiveCamera(60, width / height, 1, 10000);
        camera.position.z = 1000;

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);

        var sphere = new THREE.SphereGeometry(100,20,20);

        var geometry = new THREE.BoxGeometry(100, 100, 100);
        var material = new THREE.MeshNormalMaterial({overdraw: 0.5});

        var sphereMesh = new THREE.Mesh(sphere, material);


        group = new THREE.Group();act

        for (var i = 1; i < 200; i++) {

            var mesh = new THREE.Mesh(geometry, material);
            mesh.position.x = Math.random() * 2000 - 1000;
            mesh.position.y = Math.random() * 2000 - 1000;
            mesh.position.z = Math.random() * 2000 - 1000;
            mesh.rotation.x = Math.random() * 2 * Math.PI;
            mesh.rotation.y = Math.random() * 2 * Math.PI;
            mesh.rotation.z = Math.random() * 2 * Math.PI;
            mesh.matrixAutoUpdate = false;
            mesh.updateMatrix();
            group.add(mesh)
        }
        group.add(sphereMesh);
        scene.add(group);


        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        stats = new Stats();
        container.appendChild(stats.dom);

        window.addEventListener('resize', onWindowResize, false);
    }

    function onWindowResize() {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
    }

    function animate() {
        requestAnimationFrame(animate);
        render();
        stats.update();
    }

    function render() {
        camera.lookAt(scene.position);

        var currentSeconds = Date.now();
        group.rotation.x = Math.sin(currentSeconds * 0.0007)*0.5;
        group.rotation.y = Math.sin(currentSeconds * 0.0007)*0.5;
        group.rotation.z = Math.sin(currentSeconds * 0.0007)*0.5;
        renderer.render(scene, camera);
    }

</script>

</body>
</html>
